<style>
    .el-upload-list__item {
        transition: none !important;
    }

    .upload .el-dialog {
        background: transparent;
        -webkit-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0;
    }

    .el-upload-dragger {
        width: 100%;
        height: 100%;
        border: 0;
    }

    .small .el-upload--picture-card {
        line-height: 85px;
        width: 80px;
        height: 80px;
    }

    .resume .el-upload--picture-card {
        line-height: 202px;
        width: 202px;
        height: 202px;
    }

    .detail .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .upload .el-dialog__close {
        display: none;
    }

    .upload .el-dialog__body {
        text-align: center;
    }

    .upload.disabled .el-upload {
        display: none;
    }

    .upload.disabled .el-upload-list__item-status-label {
        display: none !important;
    }

    .upload-replace {
        display: flex;
        position: absolute;
        line-height: 12px;
        right: 0;
        left: 0;
        color: #fff;
        opacity: 0.6;
        padding: 3px;
        font-size: 12px;
        background: #000000;
        bottom: 0;
    }

    .upload-replace > span {
        flex: 1;
    }

    .single-uploaded-element .icon-delete {
        display: none;
    }

    .single-uploaded-element:hover .icon-delete {
        display: inline;
    }

    .ly-img {
        background-size: cover;
        background-position: center;
        background-color: #EFEFEF;
        overflow: hidden;
        position: relative;
    }

    .pic-pop img {
        max-width: 80%;
        max-height: 80%;
        margin: 0 auto;
        z-index: 2002
    }

    .el-image-viewer__wrapper {
        z-index: 3000 !important;
    }
    .el-upload-list{
        max-width: 400px;
    }
    .ly-upload-paste{
        background: #f5f7f9;
        border: 10px;
        border-radius: 7px;
        position: absolute;
        left: 1px;
        top: 1px;
        display: flex;
        justify-content: center;
        flex-flow: column;
        bottom: 1px;
        width: 146px;
        text-align: center;
        cursor: pointer;
    }
    .ly-upload-paste-text{
        border: 10px;
        border-radius: 7px;
        position: absolute;
        left: 1px;
        justify-content: center;
        flex-flow: column;
        bottom: 15px;
        color: #99A9BF;
        display: none;
        font-size: 12px;
        width: 146px;
        text-align: center;
        cursor: pointer;
    }
    .ly-upload-paste-text p{
        line-height: 20px;
        margin: 0;
    }
    .el-upload--picture-card:hover .ly-upload-paste-text{
        display: flex;
    }
</style>
<template>
    <div class="upload "
         :class="{ 'disabled' : disabled, 'small' : size=='small', 'resume' : size == 'resume', 'detail': size === 'detail' }">
        <el-upload
                ref="upload"
                :disabled="disabled"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
                :on-progress="onUploading"
                :on-success="handleSuccess"
                :show-file-list="type=='file'||limit!=1"
                multiple
                :data="uploadData"
                :limit="limit"
                :auto-upload="true"
                drag
                :accept="accept"
                :on-exceed="handleExceed"
                :file-list="fileList"
                :list-type="type=='file'?'text':'picture-card'">
            <el-button v-if="type=='file'" size="small" type="primary">点击上传</el-button>
            <span v-if="type!='file'">
                  <i v-if="limit>1||(value&&!value.url)||!value" class="el-icon-plus"></i>
                <div v-if="value&&(limit==1&&value.url)" class="single-uploaded-element ly-img avatar"
                     style="width: 100%; height: 100%" :style="{backgroundImage: 'url('+(value.url+image_back)+')'}">
                    <span class="icon-delete" @click.stop="deleteVideo"></span>
                </div>
                <span v-if="value&&(limit==1&&value.url)" class="upload-replace">
                    <span>替换</span>
                    <span v-if="remove" @click.stop="delPic">删除</span>
                </span>
            </span>
            <div v-if="paste&&(limit>1||(value&&!value.url)||!value)" class="ly-upload-paste-text" >

                <p>ctrl+v 粘贴图片</p><p >点击本地上传</p></div>
            <input style="opacity: 0" v-if="paste&&(limit>1||(value&&!value.url)||!value)"  @paste="onPaste" @mouseenter="mouseenter" value="点击这里粘贴剪贴板内的图片可以直接上传" class="ly-upload-paste"/>
        </el-upload>
        <el-image
                v-show="false"
                ref="previewImg"
                :src="dialogImageUrl"
                :preview-src-list="[dialogImageUrl]">
        </el-image>
    </div>
</template>
<script>
    Rap.define({
        name: 'ly-upload',
        props: {
            paste:{
                type: Boolean,
               default:true,
            },
            size: {
                'default': 'normal'
            },
            disabled: {
                'default': false
            },
            type:{
                'default': 'button'
            },
            value: {
                'default': function () {
                    return []
                }
            }, limit: {
                'default': 1
            },
            accept: {
                'default': 'image/*;video/*'
            },
            action: {
                'default': ''
            },
            img_type: {
                'default': function () {
                    return []
                }
            },
            width: Number,
            height: Number,
            remove: {
                type: Boolean,
                default: true,
            },
            dir: {
                'default': 'pic'
            },
        },
        watch: {
            'value': function (value) {
                this.valueChange(value);
            }
        },
        data: function () {
            return {
                image_back: '',
                fileList: [],
                dialogImageUrl: '',
                uploadUrl: '',
                uploadData:{},
            };
        }, created: function () {
            if (this.value) {
                this.valueChange(this.value);
            }
            if (this.action) {
                this.uploadUrl = this.action;
            } else {
                this.uploadUrl = Ly.config().uploadUrl;
            }
        },
        methods: {
            delPic() {
                this.$emit('input', null);
            },
            valueChange: function (value) {
                if(!value){
                    this.fileList = [];
                    return;
                }
                if (typeof (value) == 'string' && value) {
                    value = [{url: value}];
                    if (this.limit === 1) {
                        this.$emit('input', value[0]);
                    } else {
                        this.$emit('input', value);
                    }
                    this.fileList = [];
                    return;
                }
                if (typeof (value) == 'object'&&!(Array.isArray(value))&&!value.url ) {
                    this.$emit('input', null);
                    this.fileList = [];
                    return;
                }
                var me = this;
                me.$refs.upload && me.$refs.upload.clearFiles && me.$refs.upload.clearFiles()
                if (value) {
                    if (this.limit == 1) {
                        var url = value.url;
                        if (url && url.indexOf('mp4') > 0) {
                            this.image_back = '?x-oss-process=video/snapshot,t_1000,m_fast';
                        } else {
                            this.image_back = "";
                        }
                        value.url = url;
                        this.fileList = [];
                    } else {
                        this.fileList = [];
                        _.each(value, function (item) {
                            if (item.url.indexOf('mp4') > 0) {
                                item.url += '?x-oss-process=video/snapshot,t_1000,m_fast';
                            }
                            me.fileList.push(item);
                        });
                    }
                }
            },
            deleteVideo: function () {
                this.value.url = '';
            },
            onUploading: function () {

            },
            handleSuccess: function (res, file, fileList) {
                if (_.find(fileList, {status: 'uploading'})) {
                    return;
                }
                var value = [];
                _.each(fileList, function (item) {
                    if (item.response) {
                        var url = item.response['url'];
                        if (url) {
                            url = url.replace("?x-oss-process=video/snapshot,t_1000,m_fast", "");
                            item.response['url'] = url;
                            // item.response.name=file.name;
                            value.push(item.response);
                        } else {
                            var msg = item.response['msg'];
                            if (!msg) {
                                msg = '图片上传失败';
                            }
                            App.$message({
                                message: msg,
                                type: 'warning'
                            });
                        }
                    } else {
                        if (item.url.indexOf('mp4') > 0) {
                            item.url = item.url.replace("?x-oss-process=video/snapshot,t_1000,m_fast", "");
                        }
                        value.push(item);
                    }
                });
                this.$refs.upload.clearFiles();
                if (this.limit == 1) {
                    this.$emit('input', value[0]);
                } else {
                    this.$emit('input', value);
                }
            },
            handleRemove: function (file, fileList) {
                var search = {
                    url: file.url
                };
                if (file.type) {
                    search.type = file.type
                }
                var item = _.find(this.value, search);
                if (this.limit > 1) {
                    this.value.remove(item);
                    this.$emit('input', this.value)
                }else{
                    this.$emit('input', null)
                }
            },
            handlePreview: function (file) {
                if (file.url.indexOf('mp4') > 0) {
                    var url = file.url.replace("?x-oss-process=video/snapshot,t_1000,m_fast", "");
                    window.open(url);
                    return;
                }
                this.dialogImageUrl = file.url;
                this.$refs.previewImg.showViewer = true;
            },
            handleExceed: function (files, fileList) {
                App.$message.warning('当前限制选择 ' + this.limit + ' 个文件，本次选择了 ' + files.length + ' 个文件，共选择了' + (files.length + fileList.length) + '个文件');
            },
            beforeUpload: function (file) {
                if (this.img_type.length > 0) {
                    let isTrue = this.img_type.some(item => item === file.type)
                    if (!isTrue) {
                        this.$message.error(`上传图片只能是${JSON.stringify(this.img_type)}格式`);
                        return false;
                    }
                }
                if (file.type.indexOf('video') > -1) {
                    var isLt2M = file.size / 1024 / 1024 < 10;
                    if (!isLt2M) {
                        this.$message.error('上传视频大小不能超过 10MB!');
                        return false;
                    }
                } else {
                    var isLt2M = file.size / 1024 / 1024 < 2;
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过 2MB!');
                        return false;
                    }
                }

                if(!this.action&&Ly.config().uploadDataUrl){
                    var me=this;
                    var is=file.name.split('.');
                    return axios.post(Ly.config().uploadDataUrl,{
                        type:me.dir,
                        ext: is[is.length-1],
                    }).then(function (rs) {
                        me.uploadData=rs.data.data;
                        if(rs.data.host){
                            me.uploadUrl=rs.data.host.replace(/http:|https:/, window.location.protocol);
                        }
                    });
                }
                return  true;
            },onPaste:function (e){
               if(!this.paste||e.clipboardData.items[0].type.indexOf('image')===-1 ){
                   return;
               }
                var file=e.clipboardData.items[0].getAsFile();
                file.uid=new Date().getTime()
               this.$refs.upload.uploadFiles.push({
                   name:new Date().getTime()+".png",
                   percentage:0,
                   raw:file,
                   size:file.size,
                   status:"ready",
                   uid:file.uid
               });
                this.$refs.upload.submit();
            },mouseenter:function (e){
                e.target.focus();
            }
        }
    })


</script>